<template>
  <div id="indexsteer" :style="{ width, height }"></div>
</template>

<script>
import { queryTempList } from '@/api/collection/board'
import 'echarts-liquidfill'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'indexsteer',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }

  },
  data() {
    return {
      chart: null,
      timer: null
    }
  },
  watch: {},
  mounted() {

    this.$nextTick(() => {
      this.initChart()
    })
    //设置定时器
    this.timer = setInterval(() => {
      this.initChart()
    }, 5000)

  },

  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },

  methods: {
    initChart() {

      const echarts = this.$echarts
      if (this.chart === null) {
        this.chart = echarts.init(document.getElementById('indexsteer'))
      }
      queryTempList().then((response) => {

        var Arr = response
        var arrNew = []

        for (var i = 0; i < 3; i++) {
          var _num = Math.floor(Math.random() * Arr.length)
          var mm = Arr[_num]
          Arr.splice(_num, 1)
          arrNew.push(mm)
        }

        var arrayTemp = []

        for (let index = 0; index < arrNew.length; index++) {
          const element = arrNew[index]
          let obj = {}
          obj.name = element.desc.substring(0, 5)
          obj.value = element.value.toFixed(2)
          arrayTemp.push(obj)
        }

        const ColorList = ['#E8FF94', '#89FEBA', '#5EDCEB', '#57A4FF', '#8E87FF'] // 链群颜色值

        var titleData = []
        var series = []
        arrayTemp.forEach((item, index) => {
          const color = ColorList[index]
          titleData.push({
            text: item.name,
            x: `${27.5 * (index + 1)}%`,
            y: '35%',
            textAlign: 'center',
            textStyle: {
              fontSize: '14',
              color: color,
              textAlign: 'center'
            }
          })
          series.push({
            type: 'liquidFill',
            name: item.name,
            radius: '50%',
            center: [`${28 * (index + 1)}%`, '50%'],
            data: [
              {
                // NOTE 为了扩大鼠标悬浮热区 tooltip展示
                value: 1,
                itemStyle: {
                  color: 'transparent'
                }
              },
              item.value / (item.value * 2)
            ],
            backgroundStyle: {
              color: 'transparent'
            },
            color: [color],
            itemStyle: {
              opacity: 0.6
            },
            outline: {
              borderDistance: 5,
              itemStyle: {
                borderWidth: 1,
                borderColor: color,
                shadowBlur: 10,
                shadowColor: '#000'
              }
            },
            label: {
              position: ['50%', '50%'],
              formatter: function() {
                return `${item.value}`
              },
              fontSize: 18,
              color: '#fff'
            }
          })
        })
        var option = {
          title: titleData,
          series: series,
          tooltip: {
            show: false
          }
        }
        this.chart.setOption(option)
      })

    }
  }
}
</script>
